<template>
	<view id="message-all">
		<header-back :headerTitle="$lang('message.messageCenter')"></header-back>
		<view class="content-msg">
			<view class="msg-title">
				<view class="h2">{{$lang('message.orderAndServiceNews')}}</view>
				<!-- <view class="h6" @click="$refs.transPopup.open()">
					<text>{{filterObj.name}}</text>
					<image src="/static/icon/icon_down_01.png" class="down-r" mode=""></image>
				</view> -->
			</view>
			<view class="msg-ul" v-if="msgArr.length > 0">
				<view class="msg-li" v-for="(obj,i) in msgArr" :key="i">
					<view class="li-title">
						<view class="h1">
							<text>{{obj.title}}</text>
<!--							<view class="after" v-if=""></view>-->
						</view>
						<view class="time">{{$util.timeStampTurnTime(obj.create_time)}}</view>
					</view>
					<view class="li-con">
						<rich-text :nodes="obj.message"></rich-text>
					</view>
				</view>
			</view>
			<view class="no-ul" v-else>
				-- {{ $lang('common.noMoreData') }} --
			</view>
		</view>
		
		
		<!-- 选择时间 -->
		<uni-popup ref="transPopup" type="center" :mask-click="true">
			<view class="tran-popup">
				<view class="popup-top">
					<image @click.stop="$refs.transPopup.close()" src="/static/icon/right_arrow_03.png" class="arrow-icon" mode=""></image>
					<view class="popup-title">{{ $lang('message.filter') }}</view>
					<view class="right"></view>
				</view>
				<view class="popup-ul">
					<view class="popup-li" v-for="(fil,j) in filterArr" :key="j" @click="getTime(fil,j)">
						<view>{{fil.name}}</view>
						<image v-show="filIndex == j" src="/static/icon/icon_select_01.png" class="radio-icon" mode=""></image>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import headerBack from '@/components/headerBack.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	data() {
		return {
			msgArr: [],
			filterArr: [],
			filIndex: 0,
			filterObj: {},
			page: 1,
			totalPage: 1,
		};
	},
	onLoad() {
    this.filterArr = [
      {name: this.$lang('all'),state: ''},
      {name: this.$lang('within3Months'),state: ''},
      {name: this.$lang('_30DaysTo90Days'),state: ''},
      {name: this.$lang('thisYear'),state: ''},
      {name: this.$lang('lastYear'),state: ''},
      {name: this.$lang('longer'),state: ''},
    ]
		this.filterObj = this.filterArr[0];
		this.getList();
  },
	components: {
		headerBack,
		uniPopup
	},
	onShow() {

	},
	methods: {
		// 弹框选择
		getTime(obj,index){
			this.filIndex = index;
			this.filterObj = obj;
			this.$refs.transPopup.close();
		},
		getList(){
			this.$api.sendRequest({
				url: '/api/notice/message',
				data: {
					page: this.page,
					page_size: 12,
				},
				success: res=>{
					if(res.code == 0){
						let result = res.data;
						this.totalPage = result.page_count;
						if(this.page == 1){
							this.msgArr = result.list
						}else {
							this.msgArr.push(...result.list)
						}
					}
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			})
		},
	},
	onReachBottom() {
		if (this.page >= this.totalPage) return
		this.page++
		this.getList()
	}
};
</script>

<style>
	page {
		background: #F8F7FC;
	}
</style>

<style scoped lang="scss">
	.content-msg {
		width: 100%;
		padding: 28rpx 32rpx 0px;
		box-sizing: border-box;
		.msg-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 28rpx;
			.h3 {
				font-size: 28rpx;
				font-weight: 600;
				color: #282828;
			}
			.h6 {
				display: flex;
				align-items: center;
				text {
					font-size: 28rpx;
					font-weight: 600;
					color: #92969E;
				}
				.down-r {
					width: 24rpx;
					height: 24rpx;
					display: block;
					margin-left: 24rpx;
				}
			}
		}
		
		.msg-ul {
			.msg-li {
				width: 100%;
				background: #fff;
				padding: 0rpx 26rpx;
				box-sizing: border-box;
				border-radius: 16rpx;
				margin-bottom: 28rpx;
				.li-title {
					padding-top: 28rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.h1 {
						line-height: 40rpx;
						display: flex;
						align-items: center;
						text {
							font-size: 30rpx;
							font-weight: 600;
							color: #292929;
							max-width: 500rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;							
						}
						.after {
							width: 14rpx;
							height: 14rpx;
							background-color: #31bb6d;
							border-radius: 50%;
							margin-left: 20rpx;
						}
					}
					.time {
						font-size: 26rpx;
						color: #92969E;
						line-height: 40rpx;
					}
				}
				.li-con {
					padding: 28rpx 0px 38rpx;
					font-size: 26rpx;
					color: #92969E;
					line-height: 40rpx;
					@include nowrap;
				}
			}
		}
	}
	
	.tran-popup {
		width: 600upx;
		background: #fff;
		border-radius: 16upx;
		padding: 40upx 30upx 20px;
		box-sizing: border-box;
		.popup-top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34upx;
			.popup-title {
				font-size: 36upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
			}
			.arrow-icon {
				width: 36upx;
				height: 36upx;
			}
			.right {
				width: 40rpx;
			}
		}
		
		.popup-ul {
			width: 100%;
			.popup-li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 102upx;
				border-bottom: 2upx solid #E8EDF5;
				font-size: 30upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
				.radio-icon {
					width: 36upx;
					height: 36upx;
				}
			}
			.popup-li:last-child {
				border: none;
			}
		}
	}
</style>
